<template>
	<el-dialog title="新增" :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
		<el-form :model="form" :rules="rules" ref="form">
			<el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
				<el-input v-model="form.userName" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="头像" :label-width="formLabelWidth" prop="avatar">
				<el-upload class="orders-img_el_upload" :action="upurl" :limit="3" list-type="picture-card"
					:on-change="handleChange" :on-preview="handlePreview" :on-remove="handleRemove"
					:on-success="handleSuccess" :on-error="handleError" :file-list="fileList"
					:class="{ disUoloadSty: noneBtnImg }" ref="upload">
					<span class="orders-img_el_upload_btn" @click.stop="submitUpload">添加图片</span>
				</el-upload>
			</el-form-item>
			<el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
				<el-input v-model="form.nickname" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="密码" :label-width="formLabelWidth" prop="password">
				<el-input v-model="form.password" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="用户身份" :label-width="formLabelWidth" prop="role">
				<el-input v-model="form.role" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
				<el-input v-model="form.phone" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="电子邮件" :label-width="formLabelWidth" prop="email">
				<el-input v-model="form.email" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="地址" :label-width="formLabelWidth" prop="address">
				<el-input v-model="form.address" autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="cleardata">取 消</el-button>
			<el-button type="primary" @click="submitForm('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import userApi from "@/api/user.js"
	export default {
		components: {},
		data() {
			return {
				dialogImageUrl: "",
				dialogVisible: false,
				showBtnImg: true,
				noneBtnImg: false,
				limitCountImg: 3,
				upurl: "/api/file/upload/avatar",
				fileList: [],
				imgurl: "",
				dialogFormVisible: false,
				form: {
					userName: "",
					password: "",
					role: "",
					nickname: "",
					address: "",
					avatar: "",
					phone: "",
					email: ""
				},
				rules: {
					userName: [{
						required: true,
						message: "请输入用户名",
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: "请输入密码",
						trigger: 'blur'
					}],
					role: [{
						required: true,
						message: "请输入用户身份",
						trigger: 'blur'
					}],
					nickname: [{
						required: true,
						message: "请输入用户昵称",
						trigger: 'change'
					}],
					address: [{
						required: true,
						message: "请输入用户地址",
						trigger: 'blur'
					}],
					avatar: [{
						required: true,
						message: "请上传用户头像图片",
						trigger: 'change'
					}],
					phone: [{
						required: true,
						message: "请上传用户联系方式",
						trigger: 'change'
					}],
					email: [{
						required: true,
						message: "请上传用户电子邮箱",
						trigger: 'change'
					}],
				},
				formLabelWidth: '120px'
			};
		},
		methods: {
			handleError(err, file, fileList) {
				this.$message({
					message: "上传失败！",
					type: "success",
				});
				console.log(err);
			},
			handleSuccess(response, file, fileList) {
				if (file.response.flag == true) {
					this.fileList = fileList;
					this.form.avatar = file.response.data;
					if (fileList.length >= 3) {
						this.uploadDisabled = true;
					}
					alert(file.response.message);
				} else {
					alert(file.response.data);
				}
			},
			handleChange(file, fileList) {
				this.noneBtnImg = fileList.length >= this.limitCountImg;
			},
			handleRemove(file, fileList) {
				this.noneBtnImg = fileList.length >= this.limitCountImg;
				this.fileList.pop();
				this.uploadDisabled = false;
			},
			handlePreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
			cleardata() {
				this.dialogFormVisible = false;
				this.$refs.form.resetFields();
			},
			handleDialogClose() {
				this.dialogFormVisible = false;
				this.$refs.form.resetFields();
			},
			async addUser() {
				const res = await userApi.addUser("/znUsers/addUser", {
					userName: this.form.userName,
					password: this.form.password,
					role: this.form.role,
					nickname: this.form.nickname,
					address: this.form.address,
					avatar: this.form.avatar,
					phone: this.form.phone,
					email: this.form.email,
				});
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.$message.success("添加成功");
					this.form = {};
					this.$parent.UserAll();
				}
			},
			submitForm(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						this.addUser();
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
		},


	};
</script>

<style>
</style>